<template>
    <div style="width: 100%; height: 100%">
      <div style="width: 100%; height: 150px">
        <img
        src="../assets/img/未标题-1.png"
        style="height: 50%; margin-left: 20%; margin-top: 2%"
        alt=""
      />
      </div>
      <div
        class="main"
        style="
          width: 100%;
          height: 78%;
          background-image: url('src/assets/img/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg');
          background-size: cover;
          background-position: center;
        "
      >
        <div
          class="login-item"
          style="
            width: 30%;
            height: 90%;
            background-color: rgb(246, 241, 252);
            float: right;
            margin-top: 2%;
            margin-right: 10%;
          "
        >
          <div class="title" style="width: 100%; height: 17%">
            <p
              style="
                text-align: center;
                line-height: 80px;
                font-weight: bold;
                font-size: 160%;
              "
            >
              商城注册
            </p>
          </div>
          <div
            class="login-form"
            style="width: 100%; height: 80%; /* background-color: red*/"
          >
            <el-form v-model="registerForm">
              <el-form-item v-if="ruleFlag" style="width:100%;height:30px">
                  <div style="margin-left:50px;color:rgb(255, 147, 76);width:288px;height:30px;border: 1px solid rgb(255, 147, 76);background-color:rgb(254, 242, 242)">
                      <div style="float:left">
                          <el-icon style="margin:6px" :size="20"><WarningFilled /></el-icon>
                      </div>
                      <div style="float:left;font-size:14px;color:grey">
                          <p >{{ruleMsg}}</p>
                      </div>
                  </div>
              </el-form-item>
              <el-form-item style="width: 100%; height: 60px">
                <div
                  style="
                    width: 40px;
                    height: 40px;
                    background-color: lightgrey;
                    margin-left: 50px;
                    color:#fff
                  "
                >
                <div style="margin:7px">
                  <el-icon size="25">
                  <User />
                </el-icon>
                </div>
              </div>
                <div>
                  <el-input
                    style="width: 140%; height: 40px"
                    placeholder="账号"
                    v-model="registerForm.username"
                  >
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item style="width:100%; height: 60px">
                <div
                  style="
                    width: 40px;
                    height: 40px;
                    background-color: lightgrey;
                    margin-left: 50px;
                    color:#fff
                  "
                >
                <div style="margin:7px">
                  <el-icon size="25">
                    <Iphone />
                </el-icon>
                </div>
              </div>
                <div>
                  <el-input
                    style="width: 250px; height: 40px"
                    placeholder="手机号"
                    v-model="registerForm.phone"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item style="width: 100%; height: 60px">
                <div
                  style="
                    width: 40px;
                    height: 40px;
                    background-color: lightgrey;
                    margin-left: 50px;
                    color:#fff
                  "
                >
                <div style="margin:7px">
                  <el-icon size="25">
                  <Lock />
                </el-icon>
                </div>
              </div>
                <div>
                  <el-input
                    type="password"
                    style="width: 250px; height: 40px"
                    placeholder="密码"
                    v-model="registerForm.password"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item style="width: 100%; height: 60px">
                <div
                  style="
                    width: 40px;
                    height: 40px;
                    background-color: lightgrey;
                    margin-left: 50px;
                    color:#fff
                  "
                >
                <div style="margin:7px">
                  <el-icon size="25">
                  <Lock />
                </el-icon>
                </div>
              </div>
                <div>
                  <el-input
                    type="password"
                    style="width: 250px; height: 40px"
                    placeholder="确认密码"
                    v-model="registerForm.trimPassword"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item style="width: 100%">
                <div style="width: 40%; margin-left: 50px; margin-top:10px">
                  <el-select v-model="registerForm.role"  placeholder="请选择权限">
                      <el-option style="margin-left:10px" label="用户" value="user" />
                      <el-option style="margin-left:10px" label="商铺" value="seller" />
                </el-select>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="margin-left: 50px; margin-top: 20px">
                  <el-button type="primary" style="width: 290px" @click="RegisterForm">注册</el-button>
                </div>
              </el-form-item>
              <el-form-item>
                  <div style="width:300px;margin-left: 50px; margin-top: 20px">
                      <div style="width:70px;float: right;">
                        <router-link style="color:rgb(64, 158, 255);text-decoration:none" to="/">返回登录</router-link>
                      </div>
                  </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import {register} from "../api/index"
  export default {
      data(){
          return {
              ruleMsg:"",
              ruleFlag:false,
              registerForm:{
                  username:"",
                  password:"",
                  role:"user",
                  phone:"",
                  trimPassword:""
              }
          }
      },
      methods: {
          RegisterForm(){
              if(this.registerForm.username===""){
                  this.ruleFlag = true
                  this.ruleMsg = "请输入账号"
              }else if(this.registerForm.phone===""){
                  this.ruleFlag = true
                  this.ruleMsg = "请输入手机号"
              }else if(this.registerForm.password===""){
                  this.ruleFlag = true
                  this.ruleMsg = "请输入密码"
              }else if(this.registerForm.trimPassword===""){
                  this.ruleFlag = true
                  this.ruleMsg = "请输入确认密码"
              }else if(this.registerForm.password!==this.registerForm.trimPassword){
                  this.ruleFlag = true
                  this.ruleMsg = "密码不一致"
              }else{
                  register("web",this.registerForm).then(res=>{
                      if(res.code===200){
                          this.$router.push("/")
                          this.$message.success(res.message)
                      }else{
                        this.$message.error(res.message)
                      }
                  })
              }
          }
      },
  }
  </script>
  <style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  </style>